<template>
	<view id="withdraw-box header-top-margin">
		<v-title>{{titleType == 1? $lang('Withdraw.withdrawal'): $lang('Withdraw.transfer')}}</v-title>
		
		<header-back :headerTitle="titleType == 1? $lang('Withdraw.withdrawal'): $lang('Withdraw.transfer') "></header-back>
		
		<view class="content-with">
			<view class="tran-row" @click="openPopup()">
				<view class="left">
					<image :src="walletObj.coin_img" class="arrow-icon" mode=""></image>
					<view class="tran-name">{{walletObj.name}}</view>
				</view>
				<image src="/static/icon/right_arrow_icon_01.png" class="arrow-r" mode=""></image>
			</view>
			<view class="row-box" v-if="titleType == 1">
				<view class="title">{{$lang('Withdraw.withdrawalAddress')}}</view>
				<view class="row-input">
					<input type="text" v-model="formObj.to_address" @input="heandleState(1)" placeholder-style="color: #BBC0CB;" :placeholder="$lang('condition.pleaseEnterTheAddress')" />
					<!-- <image src="/static/icon/icon_scode.png" @click="scanCode()" class="code-icon" mode=""></image> -->
				</view>
			</view>
			<view class="row-box" v-if="titleType == 2">
				<view class="title">{{$lang('Withdraw.counterpartyAccount')}}</view>
				<view class="row-input">
					<input type="text" v-model="formObj.to_member_id" @input="heandleState(1)" placeholder-style="color: #BBC0CB;" :placeholder="$lang('condition.pleaseEnterTheOtherPartySUIDAccount')" />
				</view>
			</view>
			<view class="row-box">
				<view class="title">{{titleType == 1? $lang('Withdraw.numberOfWithdrawals')  : $lang('Withdraw.numberOfTransfers')}}</view>
				<view class="row-input">
					<input type="digit" v-model="formObj.money" @input="heandleState(2)" @blur="handlePrice()"  placeholder-style="color: #BBC0CB;" :placeholder="$lang('condition.pleaseEnterTheQuantity')" />
					<view class="all">
						<view>{{walletObj.name}}</view>
						<view class="after"></view>
						<view class="num" @click="getAll()">{{$lang('Withdraw.all')}}</view>
					</view>
				</view>
				<view class="row-tips">
					{{$lang('Withdraw.available')}}：<text class="price-num">{{walletObj.balance || 0}} {{walletObj.name}}</text>
				</view>
			</view>
			<view class="row-box">
				<view class="title">{{$lang('Withdraw.handlingFee')}}</view>
				<view class="row-input">
					<view class="all">{{titleType == 1?(walletObj.withdraw_fee|| 0) : (walletObj.transfer_fee || 0)}}</view>
					<view class="all">{{walletObj.name}}</view>
				</view>
			</view>
			<view class="h8" v-if="titleType == 1">
        {{$lang('Withdraw.fundsTip')}}
			</view>
			
		</view>
		
		<view class="content-footer">
			<view class="foo-num">
				<view class="size">{{$lang('Withdraw.arrivalQuantity')}}</view>
				<view class="num">{{arrivePrice || 0}} USDT</view>
			</view>
			<Button btnText="下一步" :disabled="disabled" @btnClick="onSubmit" ></Button>
		</view>
		
		
		<!-- 选择币种 -->
		<uni-popup ref="transPopup" type="center" :mask-click="true">
			<view class="tran-popup">
				<view class="popup-top">
					<image @click.stop="$refs.transPopup.close()" src="/static/icon/right_arrow_03.png" class="arrow-icon" mode=""></image>
					<view class="popup-title">{{$lang('Withdraw.chooseCurrency')}}</view>
					<view></view>
				</view>
				<view class="popup-ul">
					<view class="popup-li" v-for="(obj,i) in walletArr" @click.stop="getObj(obj)" :key="i">
						<view>{{obj.name}}</view>
						<image v-show="money_type == obj.money_type" src="/static/icon/icon_select_01.png" class="radio-icon" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 支付密码 -->
		<uni-popup ref="surePopup" type="center" :maskClick="false">
			<view class="tran-popup">
				<view class="popup-top">
					<view></view>
					<view class="popup-title">{{$lang('Withdraw.paymentPassword')}}</view>
					<view></view>
				</view>
				<view class="popup-pas">
					<input type="password" v-model="formObj.pay_password" placeholder-style="color: #BBC0CB;" :placeholder="$lang('Withdraw.pleaseEnterPaymentPassword')" />
				</view>
				<view class="popup-footer">
					<view class="btn" @click.stop="closeFn()">{{$lang('common.cancel')}}</view>
					<view class="btn btn-act" @click="sureDraw()">{{$lang('common.confirm')}}</view>
				</view>
			</view>
		</uni-popup>
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import Button from '@/components/buttom.vue'
export default {
	data() {
		return {
			formObj: {
				to_address: '',//
				money_type: '',//
				money: '',//
				pay_password: '', // 
			},
			disabled: true,
			titleType: 1,
			cid: '',
			walletArr: [],
			walletObj: {},
			money_type: '',
			arrivePrice: '',
		};
	},
	onLoad(e) {
		this.titleType = e.type?e.type:1;
		if(this.titleType == 2){ // 划转
			this.formObj = {
				to_member_id: '',//
				money_type: '',//
				money: '',//
				pay_password: '', // 
			}
		}
		this.cid = e.cid?e.cid: '',
		this.getList();
		
	},
	components: {
		headerBack,
		uniPopup,
		Button
	},
	onShow() {

	},
	methods: {
		// 全部划转
		getAll(){
			let allMoney = this.walletObj.balance;
			this.formObj.money = allMoney;
			this.heandleState(2);
		},
		// 处理状态
		heandleState(type){
			this.disabled = ((this.formObj.to_address || this.formObj.to_member_id) && this.formObj.money)?false:true;
			if(type ==2){ // 输入划转数量
				let fee_rate = this.titleType == 1? this.walletObj.withdraw_fee : this.walletObj.transfer_fee; // 手续费率
				this.arrivePrice = this.$util.numSub(Number(this.formObj.money),Number(fee_rate)); // 得出到账
			}
		},
		// 处理提示
		handlePrice(){
			let money = this.walletObj.balance;
			if(this.titleType == 1 && Number(this.formObj.money) < 100){
				return this.$util.showToast({title: this.$lang('condition.theNumberOfWithdrawalsMustBeGreaterThan100')})
			}
			if(this.titleType == 2 && Number(this.formObj.money) < 1){
				return this.$util.showToast({title: this.$lang('condition.theNumberOfTransfersMustBeGreaterThan1')})
			}
			if(Number(this.formObj.money) > Number(money)){
				return this.$util.showToast({title: this.$lang('condition.ltAvailableBalance')})
			}
			return true;
		},
		// 选中币种
		getObj(obj){
			this.walletObj = obj;
			this.$refs.transPopup.close();
		},
		// 获取所有币种
		getList(){
			this.$api.sendRequest({
				url: '/api/wallet/coin',
				method: 'get',
				success: res=>{
					if(res.code == 0){
						this.walletArr = res.data;
						this.walletObj = this.cid ? this.walletArr.find(v=>{
							return v.money_type == this.cid;
						}) : this.walletArr[0]
						this.money_type = this.walletObj.money_type;
						this.formObj.money_type = this.money_type
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: err=>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			})
		},
		// 打开弹窗
		openPopup(){
			this.$refs.transPopup.open();
		},
		// 关闭弹窗
		closeFn(){
			this.formObj.pay_pwd = '';
			this.$refs.surePopup.close()
		},
		onSubmit(){
			if(this.handlePrice() !== true){
				return false;
			}
			this.$refs.surePopup.open();
		},
		// 支付密码
		sureDraw(){
			if(!this.formObj.pay_password){
				return this.$util.showToast({title: this.$lang('condition.pleaseEnterPaymentPassword')})
			}
			// console.log(JSON.stringify(this.formObj))
			uni.showLoading({
				title: 'Loading...',
				mask: true,
			})
			let url = this.titleType == 1? '/api/wallet/withdraw': '/api/wallet/transfer'
			this.$api.sendRequest({
				url: url,
				method: 'post',
				data: this.formObj,
				success: res=>{
					uni.hideLoading()
					if(res.code == 0){
						let msg = this.titleType == 1? this.$lang('condition.withdrawSuccessfully'):this.$lang('condition.successfulTransfer')
						this.$util.showToast({title: msg})
						let cid = res.data.id;
						setTimeout(()=>{
							this.$refs.surePopup.close()
							uni.redirectTo({
								url: `/pages/member/blance/with_data?type=${this.titleType}&cid=${cid}`
							})							
						},1500)
					}else {
						this.$util.showToast({title: res.message})
					}
				},
			})
		},
	}
};
</script>


<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-with {
		width: 100%;
		padding: 60rpx 30rpx 0px;
		box-sizing: border-box;
	}
	.tran-row {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #F2F3F5;
		border-radius: 16upx;
		padding: 0px 30upx;
		box-sizing: border-box;
		margin-bottom: 60upx;
		.left {
			display: flex;
			align-items: center;
			.tran-name {
				font-size: 32upx;
				color: #292929;	
				margin-left: 26rpx;
			}
			.arrow-icon {
				width: 48upx;
				height: 48upx;
			}
		}
	}
	
	.row-box {
		margin-bottom: 70upx;
		color: #9E95B2;
		.title {
			font-size: 26upx;
			line-height: 32upx;
			margin-bottom: 22upx;
		}
		.row-input {
			padding-bottom: 18upx;
			border-bottom: 2upx solid #E8EDF5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 34upx;
			color: #292929;
			input {
				flex: 1;
			}
			.all {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: #292929;
				.after {
					width: 2upx;
					height: 28upx;
					background: #E8EDF5;
					margin: 0px 14upx;
				}
				.num {
					color: #31bb6d;
					font-weight: 600;
				}
			}
			
			.code-icon {
				width: 48upx;
				height: 48upx;
				margin-left: 20upx;
			}
		}
		.row-tips {
			font-size: 26upx;
			color:#92969E;
			line-height: 36upx;
			padding-top: 16upx;
			.price-num {
				color: #31bb6d;
			}
		}
	}
	
	.h8 {
		color: #31bb6d;
	}
	
	.content-footer {
		width: 100%;
		position: fixed;
		padding: 0px 30upx 28upx;
		box-sizing: border-box;
		bottom: 0px;
		left: 0px;
		.foo-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20upx;
			.size {
				font-size: 30upx;
				color: #292929;
			}
			.num {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #31bb6d;
			}
		}
	}
	
	.tran-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 30upx 20px;
		box-sizing: border-box;
		.popup-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
			.arrow-icon {
				width: 36upx;
				height: 36upx;
			}
		}
		
		.popup-ul {
			width: 100%;
			.popup-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 102upx;
				border-bottom: 2upx solid #E8EDF5;
				font-size: 30upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
				.radio-icon {
					width: 36upx;
					height: 36upx;
				}
			}
			.popup-li:last-child {
				border: none;
			}
		}
		
		.popup-pas {
			width: 100%;
			height: 100upx;
			// border: 2upx solid #393873;
			background: #F2F3F5;
			padding: 0px 26upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #292929;
			border-radius: 10upx;
			margin-bottom: 40upx;
		}
		
		.popup-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn {
				width: 260upx;
				height: 88upx;
				border-radius: 16upx;
				background: #CCD0D8;
				font-size: 34upx;
				color:#fff;
				font-family: Helvetica-Bold, Helvetica;
				font-weight: bold;
				@include flexCenter;
			}
			.btn-act {
				background: #31bb6d;
				color: #fff;
			}
		}
	}
	
</style>
